<template>
<!-- 车库管理 -->
        <!-- 数据表格 -->
        <div class="datalists">
            <div class="datalistsname">数据列表</div>
            <!-- 添加按钮 -->
            <el-button type="primary" class="append" @click="append"><i class="el-icon-plus"></i>添加车库</el-button>
            <!-- 数据表格 -->
            <div class="datatable">
                <el-table
                :data="tableData"
                border
                stripe
                style="width: 100%">
                    <el-table-column
                    type="index"
                    label="序号"
                    width="78">
                    </el-table-column>
                    <el-table-column
                    prop="Belongingcommunity"
                    label="所属小区"
                    width="228">
                    </el-table-column>
                    <el-table-column
                    prop="GargeName"
                    label="车库名称"
                    width="228">
                    </el-table-column>
                    <el-table-column
                    prop="GargeErea"
                    label="车位区域"
                    width="228">
                    </el-table-column>
                    <el-table-column
                    prop="GargeNote"
                    label="备注"
                    width="175">
                    </el-table-column>
                    <el-table-column
                    prop="operate"
                    label="操作"
                    width="280">
                        <template slot-scope="scope">
                            <i class="el-icon-edit"></i>
                            <span style="margin-left: 5px;margin-right:5px" @click="edit(scope.row.GargrID)">编辑</span>
                            <i class="el-icon-delete"></i>
                            <span style="margin-left: 5px;margin-right:5px" @click="del(scope.row.GargrID)">删除</span>
                        </template>
                    </el-table-column>
                    
                </el-table>
                
            </div>
            <!-- 车库添加表单 -->
            <div class="addgarge">
                <el-dialog title="车库添加" :visible.sync="dialogFormVisible">
                <el-form :model="form" :rules="rules" ref="ruleForm">
                    <el-form-item label="社区名称：" :label-width="formLabelWidth" class="communityinput" prop="Belongingcommunity">
                    <el-select v-model="form.Belongingcommunity" placeholder="请选择社区">
                        <el-option label="万象城" value="万象城"></el-option>
                        <el-option label="碧桂园" value="碧桂园"></el-option>
                        <el-option label="万达文旅城" value="万达文旅城"></el-option>
                        <el-option label="大卫城" value="大卫城"></el-option>
                    </el-select>
                    </el-form-item>
                    <el-form-item label="车库名称" :label-width="formLabelWidth" class="gargeinput" prop="GargeName">
                    <el-input v-model="form.GargeName" autocomplete="off" placeholder="不能超过20个字" ></el-input>
                    </el-form-item>
                    <el-form-item label="车库区域" :label-width="formLabelWidth" class="gargeinput" prop="GargeErea">
                    <el-input v-model="form.GargeErea" autocomplete="off" placeholder="不能超过20个字"></el-input>
                    </el-form-item>
                    <el-form-item label="备注信息" prop="GargeNote" :label-width="formLabelWidth" class="textereainput">
                        <el-input type="textarea" v-model="form.GargeNote" placeholder="请输入备注信息"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="resetForm('ruleForm')">取 消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
                </div>
                </el-dialog>
            </div>
        </div>
</template>

<script>
export default {
    data(){
        return{
            bgboxshow:0,    //    添加/修改
            options: [{
            value: '选项1',
            label: '万达文旅城'
            }, {
            value: '选项2',
            label: '碧桂园'
            }, {
            value: '选项3',
            label: '万象城'
            }, {
            value: '选项4',
            label: '龙须面'
            }, {
            value: '选项5',
            label: '北京烤鸭'
            }],
            dialogFormVisible: false,   //对话框
            // 添加车库对话框数据
            form: {
                Belongingcommunity:'',   //社区名称
                GargeName:'', //车库名称
                GargeErea:'', //车库区域
                GargeNote:''     //备注信息
            },
            // 对话框表单规则
            rules:{
                // 社区名称
                Belongingcommunity: [
                    { required: true, message: '请选择社区名称', trigger: 'change' }
                ],
                // 车库名称
                GargeName: [
                    { required: true, message: '请输入车库名称', trigger: 'blur' },
                    { max: 20, message: '长度不能超过20个字符', trigger: 'blur' }
                ],
                GargeErea: [
                    { required: true, message: '请输入车库区域', trigger: 'blur' },
                    { max: 20, message: '长度不能超过20个字符', trigger: 'blur' }
                ],
                GargeNote: [
                    { required: false, message: '请填写备注信息', trigger: 'blur' }
                ]
            },
            formLabelWidth: '120px',    //标签宽度
            value2: [],                 
            // tableData: [
            //     {
            //         date: '1',
            //         Belongingcommunity: '万达文旅城',
            //         Garagename: '地下车库',
            //         ParkingArea:'A区',
            //         ParkingNumber:'A-101',
            //         Parkingspacestatus:'未使用',
            //         Parkingspacearea:'12㎡',
            //         BuildingUsage:'',
            //         edit:'绑定业主',
            //         del:'编辑',
            //         opertes:'删除'
            //     }, 
            //     {
            //         date: '2',
            //         Belongingcommunity: '万达文旅城',
            //         Garagename: '商铺车位',
            //         ParkingArea:'A区',
            //         ParkingNumber:'A-101',
            //         Parkingspacestatus:'未使用',
            //         Parkingspacearea:'12㎡',
            //         BuildingUsage:'',
            //         edit:'绑定业主',
            //         del:'编辑',
            //         opertes:'删除'
            //     }, 
            //     {
            //         date: '3',
            //         Belongingcommunity: '万达文旅城',
            //         Garagename: '公共车位',
            //         ParkingArea:'A区',
            //         ParkingNumber:'A-101',
            //         Parkingspacestatus:'未使用',
            //         Parkingspacearea:'12㎡',
            //         BuildingUsage:'',
            //         edit:'绑定业主',
            //         del:'编辑',
            //         opertes:'删除'
            //     }, 
            //     {
            //         date: '4',
            //         Belongingcommunity: '万达文旅城',
            //         Garagename: '人防车位',
            //         ParkingArea:'A区',
            //         ParkingNumber:'A-101',
            //         Parkingspacestatus:'未使用',
            //         Parkingspacearea:'12㎡',
            //         BuildingUsage:'',
            //         edit:'绑定业主',
            //         del:'编辑',
            //         opertes:'删除'
            //     }, 

            // ],//数据表格数据
            tableData:[],   //数据列表
            datalists:[],   //总数据列表
        }
    },
    mounted(){
        this.$axios.get('http://127.0.0.1/carportlist').then(res=>{
            console.log(res.data)
            this.tableData=res.data
        }).catch(err=>{
            console.log(err)
        })
    },
    methods:{
        success(text){
            this.$message({
                message: '数据'+text+'成功',
                type: 'success'
            });
            this.$router.go(-1)  //页面数据返回上一级
        },
        // 确定
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // alert('submit!');
                    if(this.bgboxshow){
                        console.log('编辑',this.form)
                        this.$axios.post('http://127.0.0.1/carportlistupdate',{
                            Belongingcommunity:this.form.Belongingcommunity,
                            GargeName:this.form.GargeName,
                            GargeErea:this.form.GargeErea,
                            GargeNote:this.form.GargeNote,
                            GargrID:this.form.GargrID
                        }).then(res=>{
                            console.log(res)
                            this.$message({
                                message: '数据修改成功',
                                type: 'success'
                            });
                            this.bgboxshow=0    //添加模式
                        }).catch(err=>{
                            console.log(err)
                        })
                    }else{
                        console.log('添加')
                        this.$axios.post('http://127.0.0.1/carportlistinsert',{
                            Belongingcommunity:this.form.Belongingcommunity,
                            GargeName:this.form.GargeName,
                            GargeErea:this.form.GargeErea,
                            GargeNote:this.form.GargeNote,
                        }).then(res=>{
                            console.log(res)
                            this.tableData=res.data
                            this.$message({
                                message: '数据添加成功',
                                type: 'success'
                            });
                            this.dialogFormVisible=false
                        }).catch(err=>{
                            console.log(err)
                        })
                    }
                    this.dialogFormVisible=false
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 取消
        resetForm(formName) {
            this.dialogFormVisible=false
            this.$refs[formName].resetFields();
        },
        select(){
            console.log("查询")
        },
        reasert(){
            console.log("重置")
        },
        // 添加车库
        append(){
            this.bgboxshow=0
            this.dialogFormVisible = true
        },
        // 数据表格中楼宇管理、编辑和删除
        edit(i){
            //点击编辑进入编辑模式
            this.dialogFormVisible=true
            this.bgboxshow=1    //编辑模式
            this.form=this.tableData.find(item=>item.GargrID==i)
        },
        del(i){
            console.log('删除')
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    console.log('删除')
                    this.$axios.post('http://127.0.0.1/carportlistdelete',{
                        date:i
                    }).then(res=>{
                        console.log(res.data)
                        this.tableData=res.data
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }).catch(err=>{
                        console.log(err)
                    })  
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
        },
    }
};
</script>

<style lang="scss" scoped>
    // 数据列表
    .datalists{
        width: 1260px;
        padding: 0 20px;
        padding-bottom: 50px;
        margin-top: 10px;
        background-color: #fff;
        border: 1px solid rgba(233, 233, 233, 1);
        position: relative;
        box-sizing: border-box;
        // 数据列表名字名称
        .datalistsname{
            margin-top: 40px;
            width: 57px;
            height: 18px;
            line-height: 18px;
            color: #666666;
            font-size: 14px;
        }
        // 添加数据按钮
        .append,.appends{
            width: 80px;
            height: 35px;
            position: absolute;
            right: 20px;
            top: 23px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #0079fe !important;
            .el-icon-plus,.el-icon-folder-add{
                font-size: 16px;
                margin-right: 5px;
                font-weight: 700;
            }
        }
        .append:hover,.appends:hover{
            background-color: #66b1ff !important;
            color: #fff !important;
        }
        .appends{
            position: absolute;
            padding: 0 2px;
            right: 120px;
            top: 23px;
        }
        // 数据表格
        .datatable{
            margin-top: 20px;
            ::v-deep .has-gutter th{
                height: 45px !important;
                background-color: #f5f5f5;
                box-sizing: border-box;
                padding: 0 !important;
                font-size: 14px;
                color: #666666;
                font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑' !important;
            }
            ::v-deep .has-gutter th:nth-child(1){
                text-align: center !important;
            }
            ::v-deep .el-table__row td{
                height: 50px !important;
                padding: 0 !important;
            }
            ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
                background-color: #f9f9f9;
            }
            ::v-deep .el-table__row .el-table__cell:nth-child(2){
                // text-align: center !important;
                color: #333 !important;
            }
            ::v-deep .el-table__row .el-table__cell:nth-child(1){
                color: #333 !important;
                text-align: center;
                font-size: 14px;
            }
            ::v-deep .el-table__row .el-table__cell:nth-child(4){
                color: #333 !important;
            }
            ::v-deep .el-table__row .el-table__cell:nth-last-child(1){
                // text-align: center;
                color: #0079fe;
                .cell{
                    padding-left: 20px;
                }
                // cursor: pointer;
            }
            ::v-deep .el-table__row .el-table__cell:nth-last-child(1) span:hover{
                cursor: pointer;
                text-decoration: underline !important;
                // color: #4a4a4a;
            }
            ::v-deep .el-table__row .el-table__cell{
                color: #666666;
                font-size: 12px;
            }
            ::v-deep .el-table__row:hover{
                background-color: inherit !important;
            }
           
        }
        .addgarge{
            width: 678px;
            ::v-deep .el-dialog__header{
                background-color: #f2f2f2;
                .el-dialog__title{
                    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
                    font-weight: 700;
                    font-size: 14px;
                    color: #666666;
                }
            }
            .communityinput{
                width: 520px;
            }
            .gargeinput{
                max-width: 720px;
            }
            .textereainput{
                max-width: 720px;
                height: 175px;
                ::v-deep .el-textarea__inner{
                    // width: 800px;
                    height: 175px;
                    resize: none;
                }
            }
        }
    }
</style>    